<template>
  <div class="topbar-container">
    <el-card shadow="never" :body-style="{ padding: '0px' }">
      <el-row>
        <el-col :span="9">
          <el-menu
            @select="selectTopbar"
            mode="horizontal"
            menu-trigger="click"
            :default-active="active"
          >
            <el-submenu index="#more">
              <template slot="title">了解博主</template>
              <el-menu-item index="#githubHome">github主页</el-menu-item>
              <el-menu-item index="#blog">其他博客</el-menu-item>
            </el-submenu>
            <el-submenu index="#webSites">
              <template slot="title">其他网站</template>
              <el-menu-item index="#githubHome">github主页</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col
          :span="8"
          style="text-align: center; padding: 12px 0px 0px 10px"
        >
          <el-row>
            <el-col :span="4">
              <el-popover placement="top" trigger="hover">
                <div style="text-align: center">
                  <el-progress
                    color="#67C23A"
                    type="circle"
                    :percentage="music.volume"
                  ></el-progress>
                  <br />
                  <el-button
                    @click="changeVolume(-10)"
                    icon="el-icon-minus"
                    circle
                  ></el-button>
                  <el-button
                    @click="changeVolume(10)"
                    icon="el-icon-plus"
                    circle
                  ></el-button>
                </div>

                <el-button
                  @click="play"
                  id="play"
                  slot="reference"
                  :icon="
                    music.isPlay ? 'el-icon-refresh' : 'el-icon-caret-right'
                  "
                  circle
                ></el-button>
              </el-popover>
            </el-col>
            <el-col :span="14" style="padding-left: 20px">
              <el-slider
                @change="changeTime"
                :format-tooltip="$util.formatTime"
                :max="music.maxTime"
                v-model="music.currentTime"
                style="width: 100%"
              ></el-slider>
            </el-col>
            <el-col
              :span="6"
              style="padding: 9px 0px 0px 10px; color: #909399; font-size: 13px"
            >
              {{ $util.formatTime(music.currentTime) }}/{{
                $util.formatTime(music.maxTime)
              }}
            </el-col>
          </el-row>

          <audio ref="music" loop autoplay>
            <source src="../../assets/bgAudio.mp3" type="audio/mpeg" />
          </audio>
        </el-col>
        <el-col :span="5" style="text-align: right">
          <div style="font-size: 20px; color: #606266; margin-top: 5px">
            <b>{{ user.login }}</b>
          </div>
          <div style="color: #606266">
            <i class="el-icon-location"></i>&nbsp;{{
              user.location ? user.location : "dalian"
            }}
            <br />
          </div>
        </el-col>
        <el-col :span="2" style="text-align: center">
          <img
            v-popover:bigAvatar
            :src="user.avatar_url"
            style="
              margin-top: 4px;
              margin-left: 10px;
              width: 52px;
              height: 52px;
              border-radius: 5px;
              border: 1px solid #ebeef5;
            "
          />
          <el-popover
            ref="bigAvatar"
            placement="top-start"
            :title="user.login"
            width="200"
            trigger="hover"
          >
            <i class="el-icon-star-on"></i>&emsp;{{ user.name }}
            <br />
            <i class="el-icon-location"></i>&emsp;{{ user.location }}
            <br />
            <img :src="user.avatar_url" style="width: 200px; height: 200px" />
          </el-popover>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Nav",
  props: ["user"],
  data() {
    return {
      active: "",
      audioAutoPlay: true,
      audioUrl:
        "http://m10.music.126.net/20201209202106/bee8a6579db44c789d5c9182715d1105/ymusic/8dfe/a85c/ce67/9a5315e4db0d12193d21c5cf834eefab.mp3",
      music: {
        isPlay: false,
        currentTime: 0,
        maxTime: 0,
        volume: 100,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      setInterval(this.listenMusic, 1000);
    });
  },
  watch: {
    "$refs.music.currentTime": function () {
      console.log(this.$refs.music.currentTime);
    },
  },
  methods: {
    selectTopbar() {
      this.active = this.active == "" ? " " : "";
    },
    listenMusic() {
      if (!this.$refs.music) {
        return;
      }
      if (this.$refs.music.readyState) {
        this.music.maxTime = this.$refs.music.duration;
      }
      this.music.isPlay = !this.$refs.music.paused;
      this.music.currentTime = this.$refs.music.currentTime;
    },
    play() {
      if (this.$refs.music.paused) {
        this.$refs.music.play();
      } else {
        this.$refs.music.pause();
      }
      this.music.isPlay = !this.$refs.music.paused;
      this.$nextTick(() => {
        document.getElementById("play").blur();
      });
    },
    changeTime(time) {
      this.$refs.music.currentTime = time;
    },
    changeVolume(v) {
      this.music.volume += v;
      if (this.music.volume > 100) {
        this.music.volume = 100;
      }
      if (this.music.volume < 0) {
        this.music.volume = 0;
      }
      this.$refs.music.volume = this.music.volume / 100;
    },
  },
};
</script>

<style scoped>
.topbar-container {
  position: relative;
  z-index: 2;
  margin: auto;
  margin-top: -30px;
  width: 64rem;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>